<template>
  <div id="meetingshow">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="porjectEidtFormVisible"
      width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <projectEdit :projectId="projectId" :readOnly="true" :timestamp="timestamp"></projectEdit>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/meeting' }">司内会议</el-breadcrumb-item>
      <el-breadcrumb-item >查看</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="meetingbox" :style="'height:'+tableHeight+'px'" v-if="!listLoading">
      <div class="meetingtitle">
        <div class="meetingtitletext">
          <i class="meetingtitleicon" />
          {{project}}
        </div>
        <div class="meetingtitleright"/>
      </div>
      <div :style="'height:'+(tableHeight-60)+'px;overflow:auto'">
        <div v-if="!list||list.length===0" style="margin:20px">暂无司内会议资料</div>
        <div v-for="(item,index) in list " :key="'item'+index" class="meetingitem">
          <div class="meetingitemtitle" @click="showhide(index)">
            <div class="meetingitemindex">{{index+1}}.</div>
            <div class="meetingitemtitletext" :title="item.title">{{item.title}}</div>
            <div class="meetingitemtitleright"></div>
          </div>
          <el-collapse-transition>
            <div class="meetingitemcontent" v-show="showcontent[index]">
              <div class="meetingitemdeptname">{{item.deptName}}</div>
              <div class="meetingitemuserrealname">{{item.userRealName}}</div>
              <div class="meetingitemcontenttext" v-html="item.content?item.content.replace(/\n/g,'<br>'):''" />
              <div class="meetingitemfiles" v-if="item.files&&item.files.length>0">
                <div v-for="(it,idx) in item.files" :key="'file'+idx">
                  <a :href="$http.defaults.baseURL+$http.defaults.meetingAPI+'api/meetingGenFileInfo/download?id='+it.id">{{it.parentName?it.parentName+'('+it.fileName+')':it.fileName}}{{it.fileType?'.'+it.fileType:''}}</a>
                </div>
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import projectEdit from './detail'
export default {
  components: {
    projectEdit
  },
  data () {
    return {
      moveDownFlag: false,
      moveUpFlag: false,
      btnLoading: false,
      projectId: null,
      dialogtitle: '新建',
      timestamp: '',
      porjectEidtFormVisible: false,
      porjectEidtFormLoading: false,
      meetingAdmin: true,
      viewtype: 1,
      project: {},
      listLoading: true,
      tableHeight: 100,
      list: [
      ],
      changeSizeFlag: false,
      itemName: '',
      projectDataId: '',
      backReason: '',
      formShowVisible: false,
      submitLoading: false,
      showcontent: []
    }
  },
  methods: {
    showhide (index) {
      console.log(this.showcontent)
      // this.showcontent[index] = !this.showcontent[index]
      this.$set(this.showcontent, index, !this.showcontent[index])
    },
    detail (id) {
      this.dialogtitle = '查看'
      this.projectId = id
      this.timestamp = new Date().getTime()
      this.porjectEidtFormVisible = true
    },
    getList () {
      this.listLoading = true
      this.$http
        .get(this.$http.defaults.meetingAPI + `api/meetingBusTask/getById?id=` + this.$route.params.id)
        .then(response => {
          this.project = response.data.result.name
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .post(this.$http.defaults.meetingAPI + `api/meetingBusItem/queryList`, {taskId: this.$route.params.id})
        .then(response => {
          this.list = response.data.result
          this.showcontent = []
          this.list.forEach(item => {
            this.showcontent.push(false)
          })
          this.listLoading = false
        })
        .catch(error => {
          this.listLoading = false
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      let myheight = 150

      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - myheight
      })
    }
  },
  mounted () {
    this.getList()
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style>

</style>
<style scoped>
#meetingshow .meetingbox{
  border: 1px solid #95B8E7;
  background: #fff;
    padding:0;
    width: calc(100% - 0px);
    margin:0 10px;
    overflow: hidden;
}
#meetingshow .meetingtitle{
  height:55px;
  line-height: 55px;
  font-weight: bolder;
  font-size: 28px;
  color: #fff;
  background: url(../assets/meeting_title_back.png);
}
#meetingshow .meetingtitletext{
  background-image: linear-gradient(to bottom , #0058AC, #4683D5);
  float: left;
  padding:0 20px;
}
#meetingshow .meetingtitleicon{
  background: url(../assets/meeting_icon_title.png) no-repeat bottom center;
  width: 24px;
  height:24px;
  display: inline-block;
  margin-right: 15px;
}
#meetingshow .meetingtitleright{
  background: url(../assets/meeting_title_text_right.png) no-repeat top center;
  width: 4px;
  height:55px;
  float: left;
}
#meetingshow .meetingitemindex{
  background: #0058AC;
  color: #FFFF00;
  font-size: 40px;
  line-height: 50px;
  padding: 0 20px;
  float: left;
  font-weight: bolder;
}
#meetingshow .meetingitemtitletext{
  background: #D6E3F2;
  color: #0058AC;
  font-size: 28px;
  line-height: 50px;
  padding: 0 20px;
  float: left;
  max-width: 1300px;
  text-overflow: ellipsis;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
}
#meetingshow .meetingitemtitle{
  cursor: pointer;
  clear: both;
  background: #D6E3F2;
  margin:20px;
  border-bottom: 2px solid #0058AC;
  height: 50px;
}
#meetingshow .meetingitemtitleright{
  background: url(../assets/meeting_icon_arrow.png) no-repeat top center;
  height: 18px;
  width: 18px;
  float: right;
  margin:16px 20px;
}
.meetingitemcontent{
  margin: 20px 20px 40px 20px;
}
.meetingitemdeptname{
  float: left;
  background: url(../assets/meeting_icon_dept.png) no-repeat 28px 13px;
  font-size: 20px;
  padding:20px 20px 30px 95px;
  color:#000;
}
.meetingitemuserrealname{
  float: left;
  background: url(../assets/meeting_icon_user.png) no-repeat 28px 13px;
  font-size: 20px;
  padding:20px 20px 20px 95px;
  color:#000;
}
.meetingitemcontenttext{
  clear: both;
  background: url(../assets/meeting_icon_content.png) no-repeat 20px 20px;
  font-size: 20px;
  line-height: 200%;
  border-top: 1px solid #A2C0E1;
  padding:20px 20px 20px 95px;
  color:#000;
  min-height: 100px;
}
.meetingitemfiles{
  background: url(../assets/meeting_icon_files.png) no-repeat 25px 20px;
  font-size: 20px;
  padding:20px 20px 20px 95px;
  line-height: 200%;
  border-top: 1px solid #A2C0E1;
}
.meetingitemfiles a{
  color:#000;
  text-decoration: underline;
}
.meetingitemfiles a:hover{
  text-decoration: none;
}
</style>
